<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>innisfree官方网站</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/detailpage.css">
    <link rel="stylesheet" href="css/swiper-bundle.min.css">
    <link rel="icon" href="./img/OIP-C.jpg">
</head>

<body>
    <!-- 顶部 -->
    <header>
        <div class="w">
            <a href="#" style="padding:0px 10px"><img src="img/logo_2ebdcae.png" alt="" style="width:164px"></a>
            <div class="login">
                Hey,&nbsp;&nbsp;&nbsp;登录&nbsp;&nbsp;&nbsp;<span style="color: gray;">注册</span>
                <p class="down">
                    <span>Hey</span>
                    <a href="login.html" class="dl">登陆</a>
                    <a href="register.html" class="zc">注册</a>
                    <a href="#" class="address">附近暂无门店</a>
                </p>
            </div>
            <input type="text" class="txt1" placeholder="第四代小黑瓶">
            <img src="img/www.innisfree.cn_(1)fdj_03.png" alt="" class="small" style="width:24px">
            <ul>
                <li><a href="listpage.html">购物</a></li>
                <li><a href="#">热门活动</a></li>
                <li><a href="#">发现</a></li>
                <li><a href="#">关于我们</a></li>
            </ul>
            <div class="box1">
                <div class="inside">
                    <h5>热门搜索</h5>
                    <ul class="ul2">
                        <li><a href="#" style="width:90px;display:block;">第四代小绿瓶</a></li>
                        <li><a href="#" style="margin-left:15px;">小绿瓶</a></li>
                        <li><a href="#">限定散粉</a></li>
                        <li><a href="#">007精华</a></li>
                    </ul>
                    <ol>
                        <li><a href="#" style="width:70px;">美白橘光瓶</a></li>
                        <li><a href="#">面膜</a></li>
                        <li><a href="#">洁面</a></li>
                        <li><a href="#">红茶</a></li>
                        <li><a href="#">蓝莓</a></li>
                    </ol>
                </div>
            </div>
        </div>
    </header>
    <!-- main -->
    <main>
        <div class="w">
            <!-- <div class="list">
                <span style="color:gray">HOME&nbsp;&nbsp;/</span>
                <div class="title1">
                    &nbsp;产品类别&nbsp;<span class="select">∨</span>&nbsp;&nbsp;/
                    <ol>
                        <li><a href="#">产品类别</a></li>
                        <li><a href="#">护肤系列</a></li>
                        <li><a href="#">畅销产品</a></li>
                        <li><a href="#">特惠专区</a></li>
                    </ol>
                </div>
                <div class="title1">
                    &nbsp;基础护理&nbsp;<span class="select">∨</span>&nbsp;&nbsp;/
                    <ol>
                        <li><a href="#">防晒</a></li>
                        <li><a href="#">面膜</a></li>
                        <li><a href="#">指甲油</a></li>
                        <li><a href="#">洗面奶</a></li>
                    </ol>
                </div>
                <div class="title1">
                    &nbsp;护肤水&nbsp;<span class="select">∨</span>
                    <ol>
                        <li><a href="#">护肤水</a></li>
                        <li><a href="#">乳液</a></li>
                        <li><a href="#">精华</a></li>
                        <li><a href="#">眼霜</a></li>
                    </ol>
                </div>
            </div>
            <div class="roof">
                <div class="topleft">
                    <div id="box">
                        <div id="leftbox">
                            <img src="img/1000014542_m.png" alt="" style="width: 100%;">
                            <div id="mask"></div>
                        </div>
                        <div id="rightbox"></div>
                        <ul class="ul2">
                            <li><img src="img/scalepic1.jpg" alt=""></li>
                            <li><img src="img/scalepic1.jpg" alt=""></li>
                            <li><img src="img/scalepic1.jpg" alt=""></li>
                            <li><img src="img/scalepic1.jpg" alt=""></li>
                        </ul>
                    </div>
                </div>
                <div class="topright">
                    <div class="title">【10周年限量】绿茶籽肌活护肤尊<br>享套装</div>
                    <div class="price">
                        <span style="font-size:20px;color:#024137">￥</span>
                        <span style="color: #024137;font-size:60px;">399</span>
                    </div>
                    <div class="size">
                        <span>商品规格&nbsp;:</span>
                        <span><a href="#">绿茶籽肌活护肤尊享套装</a></span>
                    </div>
                    <div class="count">
                        <span>购买数量&nbsp;:</span>
                        <span class="counts">
                            <input type="text" value="-" id="txt1">
                            <input type="text" value="1" class="txt2">
                            <input type="text" value="+" class="txt3">
                        </span>
                    </div>
                    <div class="point">
                        <span>购物积分&nbsp;:</span>
                        <span><a href="#">100%</a></span>
                    </div>
                    <div class="share">
                        <span>分享&nbsp;:</span>
                        <span>
                            <a href="#"><img src="img/zhifubao.svg" alt=""></a>
                            <a href="#"><img src="img/weibo.svg" alt=""></a>
                            <a href="#"><img src="img/weixin.svg" alt=""></a>
                            <a href="#"><img src="img/qq.svg" alt=""></a>
                        </span>
                    </div>
                    <div class="buy">
                        <div class="purchase"><a href="#">立即购买</a></div>
                    </div>
                </div>
            </div> -->
        </div>
    </main>
    <!-- 底部 -->
    <footer>
        <div class="w">
            <div class="box">
                <div class="footer_1">
                    <div class="qqq">
                        <img src="./footer.images/logo_white_56c6462.png" alt="">
                    </div>

                    <div class="footer_1_f1">
                        <a href="#"><img src="./footer.images/weibo_74219f1.png" alt=""></a>
                        <a href="#"><img src="./footer.images/1.png" alt=""></a>
                        <img src="./footer.images/2.png" alt="">
                        <div>
                            <p>专卖店导航</p>
                            <p>探店指南</p>
                        </div>
                    </div>
                    <div class="code">
                        <div class="code_left">
                            <img src="./footer.images/copyright_d57b29a.png" alt="">
                        </div>
                        <div class="code_right">
                            <!-- <img src="./footer.images/K]QGNZA1${9~%SOF[8SC)H4.png" alt=""> -->
                            <p style="width:300px;padding-left: 10px;">copyright@2011 amorerepacific corporation.</p>
                            <p style="padding-left: 10px;">All rights reserved</p>
                        </div>

                    </div>
                </div>

                <div class="footer_2">
                    <div class="footer_2_top">

                    </div>
                    <div class="footer_2_bottom">
                        <figure style="text-align:center;margin-left:15px;"><img src="./footer.images/q1.png" alt=""
                                style="width: 72px;height:72px;padding-left: 8px;">
                            <p>Innisfree公众号</p>
                        </figure>
                        <figure style="text-align:center;margin-left:20px"><img src="./footer.images/q2.png" alt="">
                            <p>Innisfree商城小程序</p>
                        </figure>
                    </div>

                </div>

                <div class="footer_3">
                    <div class="lianxi">联系我们</div>
                    <p>服务热线：400-920-9238</p>
                    <p>服务时间：09:00-21:00 （不含国定假日）</p>
                    <p>客服邮箱：innisfree@innisfree.cn</p>

                    <p style="padding-top:30px;"><a href="#"><img src="./footer.images/gongan_caf441d.png" alt=""
                                style="padding-right: 20px;"></a> <span>公网安备312102451578</span></p>

                </div>

                <div class="footer_4">
                    <ul>
                        <a href="#">
                            <li id="huiyuan">会员中心</li>
                        </a>
                        <a href="#">
                            <li style="font-size:12px;">加入会员</li>
                        </a>
                        <a href="#">
                            <li style="font-size:12px;">会员制度</li>
                        </a>
                        <a href="#">
                            <li style="font-size:12px;">我的主页</li>
                        </a>
                    </ul>
                </div>

                <div class="footer_5">
                    <ul>
                        <a href="#">
                            <li id="huiyuan">客服中心</li>
                        </a>
                        <a href="#">
                            <li style="font-size:12px;">公告板</li>
                        </a>
                        <a href="#">
                            <li style="font-size:12px;">使用说明</li>
                        </a>
                        <a href="#">
                            <li style="font-size:12px;">FAQ</li>
                        </a>
                    </ul>
                </div>
            </div>
        </div>
    </footer>
    <!-- 回顶 -->
    <div id="backtop">
        <img src="img/icon_top_b872f90.png" alt="">
    </div>
    <!-- 客服 -->
    <a href="" class="service">
        <img src="img/icon_serve_0c1ed9a.png" alt="">
    </a>
</body>

</html>
<script src="js/jquery.min.js"></script>
<script src="css/swiper-bundle.min.js"></script>
<script>
    $(window).on("scroll", function () {
        if ($(window).scrollTop() > 250) {
            $("#backtop").fadeIn(1000)
        } else {
            $("#backtop").fadeOut(1000)
        }
    })
    $("#backtop").on("click", function () {
        $("html,body").animate({
            scrollTop: 0
        }, 1000)
    })

    $(".login").hover(function () {
        $(".down").stop().slideToggle(300);
    })
    $(".txt1").on("focus", function () {
        $(".box1").css('display', 'block')
    })
    $(".txt1").on("blur", function () {
        $(".box1").css('display', 'none')
    })
    window.addEventListener("scroll", () => {
        let header = document.querySelector("header");
        header.classList.toggle("sticky", window.scrollY > 0);
    })
    // -----------
    $(".select").on("click", function () {
        $(this).next().slideToggle().parent().siblings("li").find("ol").slideUp();
        $(this).next
    })
    //放大镜
    $("#leftbox").hover(function () {
        $("#mask").show()
        $("#rightbox").show()
    }, function () {
        $("#mask").hide()
        $("#rightbox").hide()
    })

    $("#leftbox").on("mousemove", function (e) {
        let l = e.pageX - $("#box").offset().left - $("#mask").outerWidth() / 2;
        let t = e.pageY - $("#box").offset().top - $("#mask").outerHeight() / 2;
        if (l <= 0) {
            l = 0
        }
        if (l > $("#leftbox").innerWidth() - $("#mask").outerWidth()) {
            l = $("#leftbox").innerWidth() - $("#mask").outerWidth()
        }
        if (t <= 0) {
            t = 0
        }
        if (t > $("#leftbox").innerWidth() - $("#mask").outerWidth()) {
            t = $("#leftbox").innerWidth() - $("#mask").outerWidth()
        }
        $("#mask").css("left", l + "px")
        $("#mask").css("top", t + "px")

        // 计算比例
        let lvx = $("#leftbox").innerWidth() / $("#mask").outerWidth()
        let lvy = $("#leftbox").innerHeight() / $("#mask").outerHeight()

        $("#rightbox").css("background-position-x", -lvx * l + "px")
        $("#rightbox").css("background-position-y", -lvy * t + "px")

    })


    $(".ul2>li").on("click", function () {
        $(this).addClass("active").siblings("li").removeClass("active")
        console.log($(this).find("img").prop("src"));
        $("#leftbox").css("background-image", `url(${$(this).find("img").prop("src")})`)
        $("#rightbox").css("background-image", `url(${$(this).find("img").prop("src")})`)
    })
</script>
<script>
    $(function () {
        getData()

    })
    // console.log(location.search.slice(1).split("=")[1]);
    let id = location.search.slice(1).split("=")[1];


    function getData() {
        $.get("./goodsAndShoppingCart/getGoodsInfo.php", { 'goodsId': id }, function (data) {
            let obj = JSON.parse(data)
            // console.log(data);
            // console.log(JSON.parse(data));
            let str = ''
            str += ` <div class="list">
                <span style="color:gray">HOME&nbsp;&nbsp;/</span>
                <div class="title1">
                    &nbsp;产品类别&nbsp;<span class="select">∨</span>&nbsp;&nbsp;/
                    <ol>
                        <li><a href="#">产品类别</a></li>
                        <li><a href="#">护肤系列</a></li>
                        <li><a href="#">畅销产品</a></li>
                        <li><a href="#">特惠专区</a></li>
                    </ol>
                </div>
                <div class="title1">
                    &nbsp;基础护理&nbsp;<span class="select">∨</span>&nbsp;&nbsp;/
                    <ol>
                        <li><a href="#">防晒</a></li>
                        <li><a href="#">面膜</a></li>
                        <li><a href="#">指甲油</a></li>
                        <li><a href="#">洗面奶</a></li>
                    </ol>
                </div>
                <div class="title1">
                    &nbsp;护肤水&nbsp;<span class="select">∨</span>
                    <ol>
                        <li><a href="#">护肤水</a></li>
                        <li><a href="#">乳液</a></li>
                        <li><a href="#">精华</a></li>
                        <li><a href="#">眼霜</a></li>
                    </ol>
                </div>
            </div>
            <div class="roof">
                <div class="topleft">
                    <div id="box">
                        <div id="leftbox">
                            <img src="${obj.goodsImg}" alt="" style="width: 100%;">
                            <div id="mask"></div>
                        </div>
                        <div id="rightbox"></div>
                        <ul class="ul2">
                            <li><img src="${obj.goodsImg}" alt=""></li>
                            <li><img src="${obj.goodsImg}" alt=""></li>
                            <li><img src="${obj.goodsImg}" alt=""></li>
                            <li><img src="${obj.goodsImg}" alt=""></li>
                        </ul>
                    </div>
                </div>
                <div class="topright">
                    <div class="title">${obj.goodsName}</div>
                    <div class="price">
                        <span style="font-size:20px;color:#024137">￥</span>
                        <span style="color: #024137;font-size:60px;">${obj.goodsPrice}</span>
                    </div>
                    <div class="size">
                        <span>商品规格&nbsp;:</span>
                        <span><a href="#">${obj.goodsName}</a></span>
                    </div>
                    <div class="count">
                        <span>购买数量&nbsp;:</span>
                        <span class="counts">
                            <input type="text" value="-" id="txt1">
                            <input type="text" value="${obj.goodsCount}" class="txt2">
                            <input type="text" value="+" class="txt3">
                        </span>
                    </div>
                    <div class="point">
                        <span>购物积分&nbsp;:</span>
                        <span><a href="#">100%</a></span>
                    </div>
                    <div class="share">
                        <span>分享&nbsp;:</span>
                        <span>
                            <a href="#"><img src="img/zhifubao.svg" alt=""></a>
                            <a href="#"><img src="img/weibo.svg" alt=""></a>
                            <a href="#"><img src="img/weixin.svg" alt=""></a>
                            <a href="#"><img src="img/qq.svg" alt=""></a>
                        </span>
                    </div>
                    <div class="buy">
                        <div class="purchase"><a href="javascript:;" id="bought">立即购买</a></div>
                    </div>
                </div>
            </div>
            `

            $("main>.w").html(str)
        })

    }



    $("main>.w").on("click", "#bought", function () {


        function addCart() {
            $.post("./goodsAndShoppingCart/addShoppingCart.php", { vipName: getCookie("username"), goodsId: location.search.split('=')[1], goodsCount: $(".txt2").val() }, function (data) {
                console.log(1);
                if (data.trim() == "1") {
                    alert("添加成功")
                    location.href = "cart.html"
                } else {
                    alert("添加失败")
                }
            })
        }
        addCart()
    })


</script>